<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>我的订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/assets/img/favicon.ico}">
    <!--owl carousel min css-->
    <link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}">
    <!--slick min css-->
    <link rel="stylesheet" th:href="@{/css/slick.css}">
    <!--magnific popup min css-->
    <link rel="stylesheet" th:href="@{/css/magnific-popup.css}">
    <!--font awesome css-->
    <link rel="stylesheet" th:href="@{/css/font.awesome.css}">
    <!--ionicons min css-->
    <link rel="stylesheet" th:href="@{/css/ionicons.min.css}">
    <!--animate css-->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!--jquery ui min css-->
    <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}">
    <!--slinky menu css-->
    <link rel="stylesheet" th:href="@{/css/slinky.menu.css}">
    <!--plugins css-->
    <link rel="stylesheet" th:href="@{/css/plugins.css}">
    <link th:href="@{/css/easy-responsive-tabs.css}" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" th:href="@{https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css}">
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link rel="stylesheet" th:href="@{/css/styleCar.css}">
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet" type="text/css" media="all" />
    <link th:href="@{/css/styleIndex.css}" rel="stylesheet" type="text/css" media="all" />
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/easy-responsive-tabs.css}" rel='stylesheet' type='text/css'/>
    <!-- //for bootstrap working -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,900,900italic,700italic' rel='stylesheet' type='text/css'>
    
    <!--modernizr min js here-->
    <script th:src="@{/assets/js/vendor/modernizr-3.7.1.min.js}"></script>

</head>

<body>


    <!--header area start-->

    <!-- header -->
    <div class="header" id="home">
        <div class="container">
            <ul>
                <li> <a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-unlock-alt" aria-hidden="true"></i> 登 录 </a></li>
                <li> <a href="#" data-toggle="modal" data-target="#myModal2"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> 注 册 </a></li>
                <li><i class="fa fa-phone" aria-hidden="true"></i> Call : 15055312615</li>
                <li><i class="fa fa-envelope-o" aria-hidden="true"></i> <a href="mailto:info@example.com">420919469@qq.com</a></li>
            </ul>
        </div>
    </div>
    <!-- //header -->
    <!-- header-bot -->
    <div class="header-bot">
        <div class="header-bot_inner_wthreeinfo_header_mid">
            <div class="col-md-4 header-middle">
                <form action="#" method="post">
                    <input type="search" name="search" placeholder="Search here..." required="">
                    <input type="submit" value=" ">
                    <div class="clearfix"></div>
                </form>
            </div>
            <!-- header-bot -->
            <div class="col-md-4 logo_agile">
                <h1><a href="index.html"><span>PETS</span>宠物商店 </a></h1>
            </div>
            <a th:href="@{/myInfo}">
            <div class="right m-item m-mobile-hide menu" th:if="${user != null}">
                <div class="text">
                    <img class="ui avatar image" src="https://unsplash.it/100/100?image=1005" th:src="${user.avatarPath == null} ? '' : ${user.avatarPath}">
                    <span><h2 th:text="${user.username}"> 郭江富</h2></span>
                </div>
            </div>
            </a>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="ban-top">
        <div class="container">
            <div class="top_nav_left">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse menu--shylock" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav menu__list">
                                <li class=" menu__item"><a class="menu__link" th:href="@{/index}">主页 <span class="sr-only">(current)</span></a></li>
                                <li class=" menu__item"><a class="menu__link" href="about.html" th:href="@{/myInfo}">个人中心</a></li>
                                <li class="menu__item "><a class="menu__link" th:href="@{/car}">购物车</a></li>
                                <li class="active menu__item--current menu__item"><a class="menu__link" th:href="@{/orders}">我的订单</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <!--		购物车-->

        </div>
    </div>
    
     <!--shopping cart area start -->
    <div class="shopping_cart_area mt-100" th:if="${orders != null}" th:each="order: ${orders}">
        <div class="container">  
            <form action="#"> 
                <div class="row">
                    <div class="col-12">
                        <div class="table_desc">
                            <div class="cart_page table-responsive">
                        <table>
                            <thead>
                                <tr>
                                    <th class="product_thumb">图片</th>
                                    <th class="product_name">宠物名称</th>
                                    <th class="product-price">价格</th>
                                    <th class="product_quantity">种类</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:if="${order!=null}" th:each="item : ${order.pets}">
                                    <td class="product_thumb"><a th:href="@{/detail/{id}(id=${item.id})}"><img th:src="${item.imagePath}" alt=""></a></td>
                                    <td class="product_name" th:text="${item.name}"><a href="#">Handbag fringilla</a></td>
                                    <td class="product-price" th:text="${item.price}">£65.00</td>
                                    <td class="product-price" th:text="${item.type.name}">猫</td>
                                </tr>
                            </tbody>
                        </table>
                            </div>
                            <div class="cart_submit">
                                <p class="cart_amount">总计金额:&nbsp; &nbsp;</p><span><p class="cart_amount" th:text="${order.totalMoney}">￥215.00</p></span>
                                <p class="cart_amount">购买日期:&nbsp; &nbsp;</p><span><p class="cart_amount" th:text="${order.payDate}">￥215.00</p></span>
                            </div>      
                        </div>
                     </div>
                 </div>
                 <!--coupon code area start-->
                <!--coupon code area end-->
            </form> 
        </div>     
    </div>
     <!--shopping cart area end -->

    <!--footer area start-->
    <div class="footer">
        <div class="footer_agile_inner_info_w3l">
            <div class="col-md-3 footer-left">
                <h2><a href="index.html"><span>P</span>et Shop </a></h2>
                <p>郭江富的个人商店，店主长得帅着一，里面的宠物
                    价格特别实惠，没有中间商赚差价，买到就是赚到，宇宙第一大宠物商店。</p>
            </div>
            <div class="col-md-9 footer-right">
                <div class="sign-grds">

                    <div class="col-md-5 sign-gd-two">
                        <h4>Store <span>Information</span></h4>
                        <div class="w3-address">
                            <div class="w3-address-grid">
                                <div class="w3-address-left">
                                    <i class="fa fa-phone" aria-hidden="true"></i>
                                </div>
                                <div class="w3-address-right">
                                    <h6>电话号码</h6>
                                    <p>+15055312615</p>
                                </div>
                                <div class="clearfix"> </div>
                            </div>
                            <div class="w3-address-grid">
                                <div class="w3-address-left">
                                    <i class="fa fa-envelope" aria-hidden="true"></i>
                                </div>
                                <div class="w3-address-right">
                                    <h6>邮箱地址</h6>
                                    <p>Email :<a href="mailto:example@email.com"> 420919469@qq.com</a></p>
                                </div>
                                <div class="clearfix"> </div>
                            </div>
                            <div class="w3-address-grid">
                                <div class="w3-address-left">
                                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                                </div>
                                <div class="w3-address-right">
                                    <h6>地点</h6>
                                    <p>中国 湖南 长沙 中南大学 铁道学院 铁二423

                                    </p>
                                </div>
                                <div class="clearfix"> </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 sign-gd flickr-post">
                        <h4>郭江富 <span>帅照</span></h4>
                        <ul>
                            <li><a href="single.html"><img src="images/t1.jpg" alt=" " class="img-responsive" /></a></li>
                            <li><a href="single.html"><img src="images/t4.jpg" alt=" " class="img-responsive" /></a></li>
                            <li><a href="single.html"><img src="images/t1.jpg" alt=" " class="img-responsive" /></a></li>
                            <li><a href="single.html"><img src="images/t4.jpg" alt=" " class="img-responsive" /></a></li>
                            <li><a href="single.html"><img src="images/t1.jpg" alt=" " class="img-responsive" /></a></li>
                            <li><a href="single.html"><img src="images/t4.jpg" alt=" " class="img-responsive" /></a></li>
                            <li><a href="single.html"><img src="images/t1.jpg" alt=" " class="img-responsive" /></a></li>
                            <li><a href="single.html"><img src="images/t4.jpg" alt=" " class="img-responsive" /></a></li>
                            <li><a href="single.html"><img src="images/t1.jpg" alt=" " class="img-responsive" /></a></li>
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="clearfix"></div>
            <p class="copy-right">Copyright &copy; 2020.Company GuoJiangfu All rights reserved.</a></p>
        </div>
    </div>
    <!--footer area end-->

<!-- JS
============================================ -->
<!--jquery min js-->
<script th:src="@{/assets/js/vendor/jquery-3.4.1.min.js}"></script>
<!--popper min js-->
<script th:src="@{/assets/js/popper.js}"></script>
<!--bootstrap min js-->
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<!--owl carousel min js-->
<script th:src="@{/assets/js/owl.carousel.min.js}"></script>
<!--slick min js-->
<script th:src="@{/assets/js/slick.min.js}"></script>
<!--magnific popup min js-->
<script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
<!--counterup min js-->
<script th:src="@{/assets/js/jquery.counterup.min.js}"></script>
<!--jquery countdown min js-->
<script th:src="@{/assets/js/jquery.countdown.js}"></script>
<!--jquery ui min js-->
<script th:src="@{assets/js/jquery.ui.js}"></script>
<!--jquery elevatezoom min js-->
<script th:src="@{/assets/js/jquery.elevatezoom.js}"></script>
<!--isotope packaged min js-->
<script th:src="@{/assets/js/isotope.pkgd.min.js}"></script>
<!--slinky menu js-->
<script th:src="@{/assets/js/slinky.menu.js}"></script>
<!-- Plugins JS -->
<script th:src="@{/assets/js/plugins.js}"></script>

<!-- Main JS -->
<script th:src="@{/assets/js/main.js}"></script>



</body>

</html>